<template>
  <div class="box">
    <h3>组织架构</h3>
    <div class="top_box">
      员工姓名：<el-input
        v-model="name"
        style="width: 160px; margin-right: 20px"
        placeholder="请输入"
      />
      所属部门：<el-tree-select
        v-model="deptId"
        check-strictly
        :data="depts"
        :render-after-expand="false"
        style="width: 140px"
        :props="{
          children: 'children',
          label: 'name',
          value: 'id'
        }"
      />
      <el-button class="query" @click="query">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <span class="add">
        <el-button type="primary" @click="save()">添加</el-button>
      </span>
    </div>

    <el-table
      :data="tableDate"
      border
      style="width: 100%"
      row-key="id"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="index" width="60" label="序号" align="center" />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column
        prop="mobile"
        label="联系方式"
        align="center"
        width="160"
      />
      <el-table-column prop="job" label="职务" align="center" />
      <el-table-column prop="account" label="账号" align="center" width="120" />
      <el-table-column prop="type" label="类型" align="center">
        <template v-slot="{ row }">
          <span v-if="row.type == 1">普通员工</span>
          <span v-if="row.type == 2">内销</span>
          <span v-if="row.type == 3">外销</span>
        </template>
      </el-table-column>
      <el-table-column prop="performance" label="年度业绩" align="center" />
      <el-table-column
        prop="hasFininsh"
        label="已完成业绩"
        align="center"
        width="120"
      />
      <el-table-column label="完成率" align="center">
        <template v-slot="{ row }">
          {{ row.hasFininsh / row.performance }}%
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="100">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            class="ml-2"
            :active-value="2"
            :inactive-value="1"
            @change="chg(row.userId, row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="160"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-button type="primary" circle @click="resetPw(row.userId)"
            >P</el-button
          >
          <el-button type="primary" :icon="Edit" circle @click="save(row)" />
          <el-button type="danger" :icon="Delete" circle @click="del(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination
        v-model="pageSize"
        :default-page-size="8"
        :page-sizes="[8, 10, 20, 30]"
        background
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <UpadateOrSave
      ref="upadateOrSave"
      :visible="isShow"
      @close="isShow = false"
      @reflush="init()"
    />
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from "vue";
import { getEmpList, updateStatus, deleteEmp } from "@/api/system/employee.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue";
import UpadateOrSave from "./updateOrSave.vue";
import { queryTree } from "@/api/system/dept.js";
import { resetPassword } from "@/api/system/users.js";
const depts = ref([]);

//定义分页属性
const page = ref(1);
const pageSize = ref(8);
const total = ref(0);
//定义查询条件
const name = ref(null);
const deptId = ref(null);
const mobile = ref(null);
//监听子组件关闭事件
const isShow = ref(false);

const tableDate = ref([]);

const upadateOrSave = ref(null);
//分页触发的函数
//分页大小改变触发
function handleSizeChange(ps) {
  pageSize.value = ps;
  init();
}
//页数改变触发
function handleCurrentChange(pg) {
  page.value = pg;
  init();
}
//初始化，页面加载时获取数据
async function init() {
  let tmp = {
    page: page.value,
    pageSize: pageSize.value,
    deptId: deptId.value,
    name: name.value,
    mobile: mobile.value
  };
  let res = await getEmpList(tmp);
  if (res.code == 200) {
    tableDate.value = res.data.list;
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

async function load(row, treeNode, resolve) {
  let params = {
    parentid: row.id
  };
  let res = await getDepts(params);
  resolve(res.data);
}

async function chg(id, status) {
  let res = await updateStatus(id, status);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    init();
  }
}

function save(data) {
  upadateOrSave.value.init(data);
  isShow.value = true;
}

//删除
function del(id) {
  ElMessageBox.confirm("你确定要删除吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      todel(id);
    })
    .catch(() => {});
}
async function todel(id) {
  let res = await deleteEmp(id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功"
    });
    init();
  }
}
//重置用户密码
function resetPw(id) {
  ElMessageBox.confirm("你确定要重置密码吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      toResetPw(id);
    })
    .catch(() => {});
}
async function toResetPw(id) {
  let res = await resetPassword(id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "重置成功"
    });
  }
}
//查询
async function query() {
  init();
}
//重置
function reset() {
  name.value = "";
  deptId.value = null;
  mobile.value = null;
  init();
}
//获取部门树
async function getDeptTree() {
  let res = await queryTree();
  if (res.code == 200) {
    depts.value = res.data;
  }
}
onBeforeMount(() => {
  init();
  getDeptTree();
});
</script>
<style scoped>
.top_box {
  padding-top: 20px;
  width: 100%;
  height: 70px;
  background: #fff;
  padding-left: 50px;
  margin-bottom: 20px;
}
h3 {
  font-size: 16px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 20px;
}
.add {
  float: right;
  margin-right: 20px;
}
.query {
  margin-left: 10px;
}
</style>
